/**
 *  标签检索-城市排名检验
 *  Created by lins on 2018/7/16.
 */
'use strict';
angular.module("MetronicApp").directive('cityBar', function () {
    return {
        scope: {
            id: "@",
            data: "="
        },
        restrict: 'EA',
        template: '',
        replace: true,
        link: function ($scope, element, attrs, controller) {
            function getOption(data) {
                var option3 = {
                    title: {
                        text:"高污低产前五名",
                        left:'center',
                        color:'5AB1EF'
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'value',
                            //下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                            min: 0,
                            max: 5,
                            interval: 1,
                            splitLine:{
                                show:false
                            },
                            data : ['河北民悦热力供应有限公司', '青县荣盛供热有限公司', '青县华源集中供热管理有限公司', '辛集市水处理中心', '国中（秦皇岛）污水处理有限公司']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : ['第5名', '第4名', '第3名', '第2名', '第1名']

                        }
                    ],
                    series : [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius:[5, 5, 5, 5],
                                    label: {
                                        show: true,//是否展示
                                        position: 'insideLeft',
                                        //显示series中data的name值
                                        formatter: '{b}'

                                    },


                                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#2EC7C9','#B6A2DE','#5AB1EF','#FFB980','#D8807A'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            //设置柱的宽度，要是数据太少，柱子太宽不美观~
                            barWidth: '60%',
                            data: [
                                {value:1, name:'河北民悦热力供应有限公司'},
                                {value:2, name:'青县荣盛供热有限公司'},
                                {value:3, name:'青县华源集中供热管理有限公司'},
                                {value:4, name:'辛集市水处理中心'},
                                {value:5, name:'国中（秦皇岛）污水处理有限公司'}
                                ]
                        }
                    ]
                };
                return option3;
            }
            var myChart = echarts.init(document.getElementById('first'), 'macarons');
            myChart.setOption(getOption($scope.data));

            $scope.$watch('data', function (newVal, oldVal) {
                myChart.setOption(getOption(newVal));
            });
        }
    };
});
